<!-- Accordion Default --> <div class="panel-group accordion" id="accordion"> <!-- Accordion Item --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-1">Collapsible Accordions</a></h4> </div> <div id="collapse-1" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. </div> </div> </div> <!-- // Accordion Item END --> <!-- Accordion Item --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">Collapsible Accordions</a></h4> </div> <div id="collapse-2" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. </div> </div> </div> <!-- // Accordion Item END --> <!-- Accordion Item --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">Collapsible Accordions</a></h4> </div> <div id="collapse-3" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird. </div> </div> </div> <!-- // Accordion Item END --> </div> <!-- // Accordion Default END -->
@import "http://localhost/shared/components/modules/admin/widgets/accordions/assets/less/accordions.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<!-- Accordion #2 Style --> <div class="panel-group accordion accordion-2" id="tabAccountAccordion"> <!-- Accordion Item --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-1-1"><i></i>Lorem ipsum dolor sit amet?</a></h4> </div> <div id="collapse-1-1" class="panel-collapse collapse in"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc consectetur sed. </div> </div> </div> <!-- // Accordion Item END --> <!-- Accordion Item --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-2-1"><i></i>Quisque porttitor elit ac mauris?</a></h4> </div> <div id="collapse-2-1" class="panel-collapse collapse"> <div class="panel-body"> Quisque porttitor elit ac mauris aliquam sollicitudin. Nam imperdiet ligula et dolor pulvinar consequat. Sed in turpis id erat vehicula gravida. </div> </div> </div> <!-- // Accordion Item END --> <!-- Accordion Item --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-3-1"><i></i>Vivamus eros tortor consequat sed?</a></h4> </div> <div id="collapse-3-1" class="panel-collapse collapse"> <div class="panel-body"> Vivamus eros tortor, consequat sed posuere non, tempus non ligula. Integer pharetra sem eu dolor rhoncus euismod. </div> </div> </div> <!-- // Accordion Item END --> <!-- Accordion Item --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-4-1"><i></i>Etiam suscipit leo tincidunt mi volutpat?</a></h4> </div> <div id="collapse-4-1" class="panel-collapse collapse"> <div class="panel-body"> Etiam suscipit leo tincidunt mi volutpat commodo. Morbi tempor interdum dictum. In hac habitasse platea dictumst. </div> </div> </div> <!-- // Accordion Item END --> </div> <!-- // Accordion #2 Style END -->
@import "http://localhost/shared/components/modules/admin/widgets/accordions/assets/less/accordions.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.